<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width='600px'  :fullscreen = 'Global.currentDevice'>
        <el-form :model="form" ref='form' :rules="rules"  :label-width="formLabelWidth"  :label-position='Global.dialog_label_Position'>
              <el-tabs  >
                    <el-tab-pane label="基本信息" name="first" >基本信息</el-tab-pane>
              </el-tabs>

              <el-form-item      label="名称"       prop="name" align='left'>
                    <el-input v-model.trim="form.name"  placeholder='请输入标签名称 '></el-input>
              </el-form-item>
              <el-form-item      label="描述"       prop='desc' align='left'>
                    <el-input v-model.trim="form.desc"  placeholder='请输入标签描述'></el-input>
              </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
              <el-button @click="dialogProps.visible = false">取 消</el-button>
              <el-button type="primary" @click="submit('form')">确 定</el-button>
        </div>
  </el-dialog>
</template>

<script charset="utf-8" type="text/javascript">
import { saveLabel, modifyLabel } from '@/api/settings/label' 
export default {
  name: 'labelEdit',
  data() {
    return {
      loading: false,
      //dialogo基本信息  显示隐藏状态  title 
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      iscreate:true,

      //表单label向外marin
      formLabelWidth: '120px',
      //表单验证规则
      rules:{
        name:[
          { required:true ,message:'请输入名称'}
        ]
      },
      
      //绑定表单数据
      form: {
          name: '',
          desc: '',
      },
      
    }
  },
  created(){
    
    
  },
  methods: {
    //提交
    submit(formName) {
      this.loading = true
      let that=this;
      //先验证表达
      this.$refs[formName].validate(valid => {
              //通过验证后
              if (valid) {
                  //新增
                  if(this.iscreate){
                      saveLabel(this.form).then(response => {
                            this.loading = false
                            
                            if(response.data.flag==true){
                                  this.$message({type:'success',message:response.data.msg})
                            }else if(this.resModel.data.flag==false){
                                  
                                  this.$message({type:'error',message:response.data.msg})
                            }
                            this.dialogProps.visible = false
                            this.$emit('save-finished')
                      })
                      .catch(error => {
                        this.loading = false
                        this.outputError(error)
                      })
                  }
                  else{ //编辑
                        modifyLabel(this.form).then(response => {
                              this.loading = false
                              
                              if(response.data.flag==true){
                                    this.$message({type:'success',message:response.data.msg})
                              }else if(this.resModel.data.flag==false){
                                    
                                    this.$message({type:'error',message:response.data.msg})
                              }
                              this.dialogProps.visible = false
                              this.$emit('save-finished')
                        })
                        .catch(error => {
                          this.loading = false
                          this.outputError(error)
                        })
                  }
                    
              } 
              else {
                return false;
              }
        
      });
    },
    
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openEditDialog', function(data) {
        [this.form.name,this.form.desc,this.form.code] = [data.tagName,data.tagDescription,data.code]
        this.dialogProps.action = 'edit'
        this.dialogProps.title = '编辑标签'
        this.dialogProps.visible = true
        this.iscreate=false
      })
      this.$on('openAddDialog', function() {
        this.form={
          name: '',
          desc: '',
        };
        this.resetForm('form')

        this.dialogProps.action = 'add'
        this.dialogProps.title = '新增标签'
        
        this.dialogProps.visible = true
        this.iscreate=true
      })
      
      
    })
  },
  updated(){
    
  },
  components:{
    
  }
}
</script>

<style  scoped>
.el-input{max-width:350px;}
.gapTime{width: 100px;} 
  /*.el-form-item{margin-bottom: 10px;}*/
</style>


